import Taro, { Component } from '@tarojs/taro'
import { View, Text, Slider } from '@tarojs/components'

import './index.less'
interface PanelControllerProps {
    showed: boolean,
    value: number,
    maxVaue: number,
    status: boolean
    onStatusChanged?: (status: boolean) => void
}

export default class PanelController extends Component<PanelControllerProps> {
    static defaultProps: PanelControllerProps = {
        showed: true,
        value: 1,
        maxVaue: 1,
        status: false
    }
    constructor(props: PanelControllerProps) {
        super(props)
    }
    render() {
        return (
            <View className={this.props.showed ? 'evo-reader-controller show' : 'evo-reader-controller hide'}>
                <View className='btn' onClick={this.handleBtnClicked}>
                    <Text className={this.props.status ? 'icon-reader pause' : 'icon-reader play'}/>
                </View>
                <View className='process'>
                    <Slider
                        min={1}
                        max={this.props.maxVaue}
                        step={1}
                        value={this.props.value}
                        showValue={false}
                        backgroundColor='#EEEEEE'
                        activeColor='#00D1E5'
                        blockSize={10}
                        disabled={true}
                    />
                </View>
                <View className='info'>{this.props.value}/{this.props.maxVaue}</View>
            </View>
        )
    }

    handleBtnClicked = (e: any) => {
        const status = !this.props.status
        if (this.props.onStatusChanged) {
            this.props.onStatusChanged(status)
        }
        e.stopPropagation()
    }
}
